<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<link rel="stylesheet" href="css/star.css" />
	</head>
	<body>
		<div id='app'>
			<my-star @update:rate='update($event,0)' :star='rate[0]' title="描述相符"></my-star>
			<my-star @update:rate='update($event,1)' :star='rate[1]' title="物流服务"></my-star>
			<my-star @update:rate='update($event,2)' :star='rate[2]' title="服务态度"></my-star>
			总分：{{
				rate
			}}
		</div>
		<script src="js/star.js"></script>
		<script>
			Vue.createApp({
				components: {
					'my-star': Star
				},
				data() {
					return {
						rate:[2,4,5]
					}
				},
				methods:{
					update(val,i){
						console.log(val)
						this.rate[i]=val
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>